<template>
  <div class="stamp">
      <div class="top">
          <Stampcontent/>
          <Stampcontent/>
          <Stampcontent/>
          <Stampcontent/>
          <Stampcontent/>
      </div> 
      <div class="bottom">
          <div class="left">
              <h5>有好货</h5>
              <div class="imgs">
                  <img src="/shop/1.jpg">
                  <img src="/shop/1.jpg">
              </div>
          </div>
          <div class="right">
              <h5>热销读物</h5>
              <div class="imgs">
                  <img src="/shop/1.jpg">
                  <img src="/shop/1.jpg">
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Stampcontent from './stampcontent.vue'
export default {
    components:{
        Stampcontent
    }
}
</script>

<style scoped>
    .stamp{
        width:3.4rem;
        height:1.94rem;
        margin:auto;
        margin-bottom:0.1rem
    }
    .stamp .top{
        width:100%;
        height:0.84rem;
        background-color: #fff;
        border-radius: 0.08rem;
        margin-bottom:0.1rem;
        display: flex;
        justify-content: space-around;
    }
    .stamp .bottom{
        width:100%;
        height:1rem;
        background-color: #fff;
        border-radius: 0.08rem;
        display: flex;
    }
    .stamp .bottom .left{
        width:50%;
        height:100%;
        border-right:1px solid gray
    }
    .stamp .bottom .left h5{
        font-size:0.12rem;
        color:#1e9f64;
        margin:0.1rem 0 0.08rem 0.15rem
    }
    .stamp .bottom .right{
        width:50%;
        height:100%;
    }
    .stamp .bottom .right h5{
        font-size:0.12rem;
        color:#eb8423;
        margin:0.1rem 0 0.08rem 0.15rem
    }
    .imgs{
        width:1.4rem;
        height:0.6rem;
        display: flex;
        justify-content: space-between;
        margin:auto;
    }
    .imgs img{
        display: block;
        width:0.6rem;
        height:0.6rem
    }
</style>